<template>
  <div>
    <t-card>
      <t-space direction="vertical">
        <t-form :data="searchParams" layout="inline" @submit="handleSearch">
          <t-form-item v-for="field in searchFields" :key="field.prop" :label="field.label" label-width="60px">
            <t-date-picker
              v-if="field.type === 'year'"
              v-model="searchParams[field.prop]"
              mode="year"
              :placeholder="field.placeholder"
              clearable
            />
            <t-input
              v-else-if="field.type === 'input'"
              v-model="searchParams[field.prop]"
              :placeholder="field.placeholder"
              clearable
            />
            <t-select
              v-else-if="field.type === 'select'"
              v-model="searchParams[field.prop]"
              :placeholder="field.placeholder"
              clearable
            >
              <t-option
                v-for="option in selectOptions[field.prop]"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </t-select>
            <t-cascader
              v-else-if="field.type === 'cascader'"
              v-model="searchParams[field.prop]"
              :options="cascaderOptions[field.prop]"
              :placeholder="field.placeholder"
              clearable
            />
          </t-form-item>
          <t-form-item>
            <t-button type="submit" theme="primary" @click="handleSearch">查询</t-button>
            <t-button type="reset" variant="base" theme="default" @click="resetSearch">重置</t-button>
          </t-form-item>
        </t-form>
        <t-row justify="space-between">
          <t-col>
            <t-button theme="primary" @click="openDialog()">新增</t-button>
          </t-col>
          <t-col>
            <t-button theme="primary" @click="handleExport">导出</t-button>
          </t-col>
        </t-row>
      </t-space>
    </t-card>
    <t-space class="mgt20">
      <t-card title="列表标题">
        <t-space direction="vertical">
          <t-table
            :data="tableData"
            :columns="tableColumns"
            row-key="id"
            vertical-align="top"
            :hover="true"
            :loading="tableLoading"
          >
            <template #operation="{ row }">
              <t-space>
                <t-link theme="primary" @click="openDialog(row)"> 编辑</t-link>
                <t-link theme="danger" @click="deleteData(row.id, row.name)"> 删除</t-link>
              </t-space>
            </template>
          </t-table>
          <t-pagination
            v-model:current="page.pageCurrent"
            v-model:pageSize="page.pageSize"
            :total="page.total"
            @change="handlePageChange"
          />
        </t-space>
      </t-card>
    </t-space>

    <t-dialog v-model:visible="dialogVisible" :header="isEdit ? '编辑' : '新增'">
      <t-form :data="formData" :rules="formRules" ref="formRef">
        <t-form-item
          v-for="field in formFields"
          :key="field.prop"
          :label="field.label"
          :name="field.prop"
        >
          <t-input v-if="field.type === 'input'" type="text" v-model="formData[field.prop]" :style="{ width: field.width }" :placeholder="field.placeholder" />
          <t-input-number v-else-if="field.type === 'number'" theme="normal" v-model="formData[field.prop]" :style="{ width: field.width }" :min="field.min" :placeholder="field.placeholder"></t-input-number>
          <t-select
            v-else-if="field.type === 'select'"
            v-model="formData[field.prop]"
            :style="{ width: field.width }" 
            :placeholder="field.placeholder"
            clearable
          >
            <t-option
              v-for="option in selectOptions[field.prop]"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </t-select>
          <t-cascader
            v-else-if="field.type === 'cascader'"
            v-model="formData[field.prop]"
            :options="cascaderOptions[field.prop]"
            :style="{ width: field.width }" 
            :placeholder="field.placeholder"
          />
          <t-radio-group
            v-else-if="field.type === 'radio'"
            v-model="formData[field.prop]"
          >
            <t-radio
              v-for="option in field.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </t-radio-group>
        </t-form-item>
      </t-form>
      <template #footer>
        <t-button theme="default" variant="outline" @click="dialogVisible = false">取消</t-button>
        <t-button theme="primary" @click="submitForm">确定</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script setup>
import * as apis from '@/api/test'
import { useCrud } from '@/composables/crud';
import { onMounted } from 'vue';
const config = {
  apis,
  searchFields: [
    { prop: 'name', label: '名称：', placeholder: '请输入名称', type: 'input' },
    { prop: 'status', label: '状态：', placeholder: '请选择状态', type: 'select',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ]
    },
    { prop: 'region', label: '地区：', placeholder: '请选择地区', type: 'cascader'},
    { prop: 'year', label: '年份：', placeholder: '请选择年份', defaultValue: '', type: 'year' }
  ],
  tableColumns: [
    { colKey: 'name', title: '名称' },
    { colKey: 'age', title: '年龄' },
    { colKey: 'name', title: '名称' },
    { colKey: 'age', title: '年龄' },
    { colKey: 'name', title: '名称' },
    { colKey: 'operation', title: '操作', fixed: 'right', width: 120 },
  ],
  page: {
    pageCurrent: 1,
    pageSize: 10,
    total: 0,
  },
  formFields: [
    { prop: 'name', label: '名称：', placeholder: '请输入名称', type: 'input', width: '300px',
      rules: [{ required: true, trigger: 'blur', message: '名称不能为空' }]
    },
    { prop: 'age', label: '年龄：', placeholder: '请输入年龄', type: 'number', min: 1, width: '300px',
      rules: [
        { required: true, trigger: 'blur', message: '年龄不能为空' },
        { validator: (value) => value > 0, message: '年龄必须大于0' }
      ]
    },
    { prop: 'grade', label: '年级：', placeholder: '请选择年级', type: 'select', width: '300px',
      api: 'api/test/grades',
      rules: [{ required: true, trigger: 'change', message: '请选择年级' }]
    },
    { prop: 'region', label: '地区：', placeholder: '请选择地区', type: 'cascader', width: '300px'},
    { prop: 'status', label: '状态', placeholder: '请选择状态', type: 'radio',
      defaultValue: 1,
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ]
    },
  ],
}

const {
  searchFields,
  tableData,
  tableLoading,
  formData,
  dialogVisible,
  isEdit,
  tableColumns,
  formFields,
  searchParams,
  page,
  formRules,
  selectOptions,
  cascaderOptions,
  formRef,
  fetchData,
  openDialog,
  submitForm,
  deleteData,
  handleSearch,
  resetSearch,
  handlePageChange,
} = useCrud(config);

onMounted(() => {
  console.log('onMounted')
  fetchData()
})
</script>